<template>
	<view class="wrap-item flex align-center just-between row-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="title">{{ item.title }}</view>
		</view>

		<picker mode="selector" :range="bankList" range-key="bankName" @change="onChange($event)">
			<view class="wrap-right flex align-center just-end">
				<block v-if="value === ''">
					<view class="place f-30">{{ item.place }}</view>
				</block>

				<block v-else>
					<image class="bank-icon" :src="$staticImagePath(`bank/${bankCode}.png`)" />

					<view class="bank-name f-30">{{ value }}</view>
				</block>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 银行卡
			 */
			bankCode: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				bankList: [
					{ bankCode: "ICBC", bankName: "工商银行" },
					{ bankCode: "ABC", bankName: "农业银行" },
					{ bankCode: "PSBC", bankName: "邮储银行" },
					{ bankCode: "CCB", bankName: "建设银行" },
					{ bankCode: "CMB", bankName: "招商银行" },
					{ bankCode: "BOC", bankName: "中国银行" },
					{ bankCode: "COMM", bankName: "交通银行" },
					{ bankCode: "SPDB", bankName: "浦发银行" },
					{ bankCode: "GDB", bankName: "广发银行" },
					{ bankCode: "CMBC", bankName: "民生银行" },
					{ bankCode: "PAB", bankName: "平安银行" },
					{ bankCode: "CEB", bankName: "光大银行" },
					{ bankCode: "CIB", bankName: "兴业银行" },
					{ bankCode: "CITIC", bankName: "中信银行" },
				],
			};
		},
		methods: {
			/**
			 * 选择
			 */
			onChange(e) {
				const item = this.bankList[e.detail.value];
				this.$emit("input", item.bankName);
				this.$emit("update:bankCode", item.bankCode);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/publish.css";

	.wrap-right {
		gap: 10rpx;

		.bank-icon {
			width: 44rpx;
			height: 44rpx;
		}

		.bank-name {
			color: #121212;
		}
	}
</style>
